import React, {Component} from "react"
import {DetailWrapper, Header, Content} from "./style"
import {connect} from "react-redux"
import {actionCreater} from "./store"

class Detail extends Component {

  render() {
    console.log(this.props)

    const {title, content} = this.props
    return (
      <div>
        <DetailWrapper>
          <Header>
            {title}
          </Header>
          <Content dangerouslySetInnerHTML={{__html: content}}/>
        </DetailWrapper>
      </div>
    )
  }

  componentDidMount() {
    console.log(this.props)
    this.props.getDetail(this.props.match.id);
  }
}

const mapState = (state) => ({
  title: state.getIn(["detail", "title"]),
  content: state.getIn(["detail", "content"])
})

const mapDispatch = (dispatch) => ({
  getDetail(id) {
    dispatch(actionCreater.getDetail(id));
  }
})

export default connect(mapState, mapDispatch)(Detail);
